<template>
  <CommonDataTable :data="data" :options="options" :table-cols="columns" ref="tableRef"/>
</template>

<script setup lang="ts">

import { useApi, useDateFormatter } from "~/composeables";
import {ref} from 'vue';
import UpdateDialog from "~/components/admin/Book/UpdateDialog.vue";
import CreateDialog from "~/components/admin/Book/CreateDialog.vue";
import DepartmentCache from "~/store/system/departmentCache";
import BookStatusCache from "~/store/booksvr/bookStatusCache";
import BookCategoryCache from "~/store/booksvr/bookCategoryCache";

const api = useApi()
const dateFormatter = useDateFormatter();

const pageIndex = ref(1);
const pageSize = ref(10);
const filters = ref({});
const data = ref([]);
const tableRef= ref<any>();

const loadData = (pi : number = pageIndex.value, ps : number = pageSize.value, fs : any = filters.value)=> {
  api.bookBookApi.filterData({pageIndex: pi, pageSize: ps, ...fs})
      .then(res=>{
        data.value = res.data
      }).catch(err=>{
        console.error(err)
      })
}

const deleteOne = async (id:any)=>{
  await api.bookBookApi.deleteById(id)
      .then(res=>{
        if(res.success){
          ElMessage.success("已成功删除！");
          tableRef.value.reload();
        }else{
          ElMessage.error("删除失败");
        }
      })
      .catch(err=>{
        console.error(err);
        ElMessage.error("删除失败");
      })
}

const deleteMany = async (ids:any)=>{
  await api.bookBookApi.deleteMany(ids)
      .then(res=>{
        if(res.success){
          ElMessage.success("已成功删除！");
          tableRef.value.reload();
        }else{
          ElMessage.error("删除失败");
        }
      })
      .catch(err=>{
        console.error(err);
        ElMessage.error("删除失败");
      })
}

const options : ElTableOptions = {
  showTitle : true,
  title : "书籍列表",
  allowEdit : true,
  allowDelete: true,
  allowDeleteMany : true,
  dataLoadFunc : loadData,
  deleteFunc : deleteOne,
  deleteManyFunc : deleteMany,
  updateDialog : UpdateDialog,
  createDialog : CreateDialog,
  filterList: [
    {columnName : 'departmentId', filterValues : DepartmentCache.departmentSelectSource},
    {columnName : 'status', filterValues : BookStatusCache.bookStatusSelectSource},
  ],
  orderList: [],
  pageSize: 10,
};


const getDepartmentName = (id : any)=>{
  let matched = DepartmentCache.departments?.filter(x=>x.id === id);
  if(matched?.length > 0){
    return matched[0].name;
  }else {
    return "/";
  }
}

const getCategoryName = (id: any)=>{
  let matched = BookCategoryCache.bookCategories?.filter(x=>x.id === id);
  if(matched?.length > 0){
    return matched[0].name;
  }else {
    return "/";
  }
}

const getStatusName = (id: any)=>{
  let matched = BookStatusCache.bookStatus?.filter(x=>x.value === id);
  if(matched?.length > 0){
    return `<span class="tag-success">${matched[0]?.text}</span>`;
  }else{
    return "/";
  }
}


const columns : Array<ElTableColumnSetting> = [
  {columnName: "name",columnVerboseName: "书籍名称",columnWidth: 0, columnValueConverter: (value: any)=>value},
  {columnName: "authors",columnVerboseName: "作者",columnWidth: 0, columnValueConverter: (value: any)=>value},
  {columnName: "publisher",columnVerboseName: "出版社",columnWidth: 0, columnValueConverter: (value: any)=>value},
  {columnName: "pubDate",columnVerboseName: "出版日期",columnWidth: 0, columnValueConverter: (value: any)=>dateFormatter.format(value, "yyyy-mm-dd")},
  {columnName: "identityKey",columnVerboseName: "图书标识",columnWidth: 0, columnValueConverter: (value: any)=>value},
  {columnName: "categoryId",columnVerboseName: "所属分类",columnWidth: 0, columnValueConverter: getCategoryName},
  {columnName: "departmentId",columnVerboseName: "所属单位",columnWidth: 0, columnValueConverter: getDepartmentName},
  {columnName: "position",columnVerboseName: "所在位置",columnWidth: 0, columnValueConverter: (value: any)=>value},
  {columnName: "status",columnVerboseName: "书籍状态",columnWidth: 0, columnValueConverter: getStatusName},
]

defineExpose({tableRef});

onMounted(()=>{
  nextTick(()=>{
    loadData()
  })
})

</script>